<template>
  <div class="container">
    <div class="city">
      <router-link to="/city"
        >{{ city }} <van-icon name="arrow-down"
      /></router-link>
    </div>
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="image in images" :key="image.id">
          <img :src="image.imgUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav">
      <router-link to="/films/in_theaters">正在热映</router-link>
      <router-link to="/films/coming_soon">即将上映</router-link>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import HomeHttp from '../../models/HomeHttp.js';

export default {
  data() {
    return {
      images: [],
      city: '',
    };
  },
  async activated() {
    /* 获取城市页面传过来的值 */
    this.city = localStorage.getItem('city');
    /* 调用接口数据渲染轮播图 */
    var path = this.$route.path;
    var result = await HomeHttp.getBanner(path);
    this.images = result.data.res;
  },
};
</script>

<style scoped>
.container {
  position: relative;
}
.city {
  position: absolute;
  cursor: pointer;
  z-index: 1000;
  left: 10px;
  top: 10px;
}
.city a {
  color: #fff;
}
.van-icon-arrow-down:before {
  font-size: 10px;
}
img {
  width: 100%;
  height: 100%;
}
.nav {
  display: flex;
  justify-content: space-around;
  line-height: 50px;
}
.nav a {
  color: black;
}
.nav .router-link-active {
  color: orangered;
  border-bottom: 2px solid orangered;
}
</style>
